'use client'
import React, { useState, useRef } from 'react'
import Link from 'next/link';
import message from '@/components/common/message';

export default function Form({ accountName, passwordName, buttonName, formRef, onFinish, linkName, linkHref, formType }) {
  const [showPwd, setShowPwd] = useState(false);
  const [codebtn, setCodebtn] = useState("获取验证码");
  const refUsername = useRef();
  const codeSend = () => {
    if (!refUsername.current.value) {
      message.error("请输入账号");
      return;
    }
    fetch('/api/admin/auth/send-code', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: refUsername.current.value })
    })
      .then(res => res.json())
      .then(res => {
        if (res.code === 0) {
          message.success(res.message);
          let time = 60;
          const timer = setInterval(() => {
            time--;
            setCodebtn(time + "s");
            if (time === 0) {
              clearInterval(timer);
              setCodebtn("获取验证码");
            }
          }, 1000);
        } else {
          message.error(res.message);
        }
      })
  }
  return (
    <form ref={formRef} onSubmit={onFinish} className="bg-white p-8 rounded-xs shadow-md min-w-[320px] flex flex-col gap-4 text-black" >
      <label>
        <span className='block text-sm text-gray-500 mb-1'>{accountName ? accountName : "Account"}</span>
        <input ref={refUsername} type="text" name="username" required className="border rounded-xs px-3 py-2 w-full mt-1 text-sm" placeholder="请输入你的邮箱" autoComplete="username" />
      </label>
      {formType && formType === "register" && <label>
        <span className='block text-sm text-gray-500 mb-1'>{'验证码'}</span>
        <div className='flex items-center gap-2  w-full mt-1 '>
          <input type="text" name="verificationCode" required className="border rounded-xs px-3 py-1 text-sm h-9" placeholder="请输入验证码" autoComplete="verification-code" />
          <button disabled={codebtn !== "获取验证码"} onClick={codeSend} type="button" className="bg-red-600 text-white text-xs rounded-xs w-20 h-9 hover:bg-red-700 hover:cursor-pointer" >{codebtn}</button>
        </div>
      </label>}
      <label className="relative">
        <span className='block text-sm text-gray-500 mb-1'>{passwordName ? passwordName : "Password"}</span>
        <input type={showPwd ? "text" : "password"} name="password" required className="border rounded-xs px-3 py-2 w-full mt-1 pr-10 text-sm" placeholder="请输入密码" autoComplete="current-password" />
        <button type="button" tabIndex={-1} className="absolute right-3 top-9 text-gray-500 hover:cursor-pointer" onClick={() => setShowPwd(v => !v)} > {!showPwd ? <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /> </svg> : <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.956 9.956 0 012.293-3.95M6.873 6.872A9.956 9.956 0 0112 5c4.477 0 8.268 2.943 9.542 7a9.956 9.956 0 01-4.043 5.306M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3l18 18" /> </svg>} </button>
      </label>
      <button type="submit" className="bg-red-600 text-white rounded-xs px-4 py-2 mt-2 text-md hover:bg-red-700 hover:cursor-pointer" > {buttonName ? buttonName : "Login"} </button>
      <div className='flex justify-end text-xs pt-1'>
        {linkName && linkHref && <Link href={linkHref} className="text-gray-500 hover:cursor-pointer" > {linkName} </Link>}
      </div>
    </form>
  )
}
